<template>
  <div>
    <el-card class="box-card">
      <div class="search">
        <!-- <el-button type="info" size="mini" @click="nowWeek(new Date())">当前周</el-button> -->
        <p style="">{{currentname}}</p>
        <!-- <el-button type="info" size="mini" @click="nextweek(new Date())">下一周</el-button> -->
      </div>
      <div class="select">
        <div class="monday" style=" width:180px;float:left;">
            <span>周一</span>
            <el-select v-model="$store.state.monday" size="small" placeholder="请选择" @change="changemonday($store.state.monday,currentaccount)">
            <el-option
                v-for="item in options"
                :style=""
                :key="item.value"
                :label="item.label"
                :value="item.status">
            </el-option>
            </el-select>
        </div>
        <div class="monday" style=" width:180px;float:left;margin-left:-80px">
            <span>周二</span>
            <el-select v-model="$store.state.tuesday" size="small"  placeholder="请选择" @change="changetuesday($store.state.tuesday,currentaccount)">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.status">
            </el-option>
            </el-select>
        </div>
        <div class="monday" style="width:180px;float:left;margin-left:-80px">
            <span>周三</span>
            <el-select v-model="$store.state.wednesday" size="small"  placeholder="请选择" @change="changewednesday($store.state.wednesday,currentaccount)">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.status">
            </el-option>
            </el-select>
        </div>
        <div class="monday" style=" width:180px;float:left;margin-left:-85px">
            <span>周四</span>
            <el-select v-model="$store.state.thursday" size="small"  placeholder="请选择" @change="changethursday($store.state.thursday,currentaccount)">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.status">
            </el-option>
            </el-select>
        </div>
        <div class="monday" style=" width:180px;float:left;margin-left:0px">
            <span>周五</span>
            <el-select v-model="$store.state.friday" size="small"  placeholder="请选择" @change="changefriday($store.state.friday,currentaccount)">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.status">
            </el-option>
            </el-select>
        </div>
        <div class="monday" style=" width:180px;float:left;margin-left:-80px">
            <span>周六</span>
            <el-select v-model="$store.state.saturday" size="small"  placeholder="请选择" @change="changefriday($store.state.saturday,currentaccount)">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.status">
            </el-option>
            </el-select>
        </div>
        <div class="monday" style=" width:180px;float:left;margin-left:-80px">
            <span>周日</span>
            <el-select v-model="$store.state.sunday" size="small"  placeholder="请选择" @change="changefriday($store.state.sunday,currentaccount)">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.status">
            </el-option>
            </el-select>
        </div>
      </div>
      <!-- <el-calendar :range="getdate( new Date())" style="height:500px" >
        <template slot="dateCell" slot-scope="{date, data}" >  
            <p :class="data.isSelected ? 'is-selected' : '' ">
            {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '' : ''}} 
            <el-tag>
             
            </el-tag>        
            </p> 
        </template>
      </el-calendar> -->
    </el-card>
      <!-- 信息 -->
  </div>
</template>
<script>
import moment from 'moment'
moment().format();
export default {
  props:{
    currentaccount:String,
    currentname:String,
    monday:String,//周一的状况
    tuesday:String,
    wednesday:String,
    thursday:String,
    friday:String,
    saturday:String,
    sunday:String,
    scheduleData:Object,
    newscheduleData:Array
  },

  data() {
    return {
     strdate:"",//今天周几
     timerange:[],
     starttime:"",
     endtime:"",
     options:[{value:"1",status:"门诊"},{value:"2",status:"休息"}],
     mondayoptions:[],
    };
  },
  components: {},
  created() {
    //由于props接收的数据是异步获取的，在子组件created时数据还没有准备好，所以会获取不到
  },
  watch: {

  },
  mounted() {},
  methods: {
     getdate(date){
        // var today = new Date();
        // var strYear = today.getFullYear();
        // var strDay = today.getDate();
        // var strMonth = today.getMonth() + 1;
        // this.strdate = today.getDay();
        // var now=strYear+"-"+strMonth+"-"+strDay;
        let startDate = moment(date).startOf("week").add(1, "days").format("YYYY-MM-DD HH:mm:ss");
        let endDate = moment(date).weekday(7).endOf("week").add(1, "days").format("YYYY-MM-DD HH:mm:ss");
        // console.log([startDate,endDate]);
        return [startDate,endDate];
     },
        //当前周
        nowWeek(date){
            let startDate = moment(date).startOf("week").add(1, "days").format("YYYY-MM-DD HH:mm:ss")
            // let endDate = moment(date).endOf("week").add(1, "days").format("YYYY-MM-DD HH:mm:ss");
            this.starttime=startDate;
            return startDate;
        },
        nextWeek(date) {
            // let startDate = moment(date).weekday(7).startOf("week").add(1, "days").format("YYYY-MM-DD HH:mm:ss")
            let endDate = moment(date).weekday(7).endOf("week").add(1, "days").format("YYYY-MM-DD HH:mm:ss");
            this.endtime=endDate;
            return endDate;
        },
        changemonday(value,currentaccount){
            var currentmonday=[value,currentaccount];
            this.$store.commit('savemonday',currentmonday)
            this.$message({
                message: '已操作',
                type: 'success'
            });
        },
        changetuesday(value,currentaccount){
            // console.log("changetuesday"+value);
            var currentmonday=[value,currentaccount];
            this.$store.commit('savetuesday',currentmonday)
            this.$message({
                message: '已操作',
                type: 'success'
            });
        },
        changewednesday(value,currentaccount){
            // console.log("changewednesday"+value);
            var currentmonday=[value,currentaccount];
            this.$store.commit('savewednesday',currentmonday)
            this.$message({
                message: '已操作',
                type: 'success'
            });
        },
        changethursday(value,currentaccount){
            // console.log("changethursday"+value);
            var currentmonday=[value,currentaccount];
            this.$store.commit('savethursday',currentmonday)
            this.$message({
                message: '已操作',
                type: 'success'
            });
        },
        changefriday(value,currentaccount){
            // console.log("changefriday"+value);
            var currentmonday=[value,currentaccount];
            this.$store.commit('savefriday',currentmonday)
            this.$message({
                message: '已操作',
                type: 'success'
            });
        },
        changesaturday(value,currentaccount){
            // console.log("changesaturday"+value);
            var currentmonday=[value,currentaccount];
            this.$store.commit('savesaturday',currentmonday)
            this.$message({
                message: '已操作',
                type: 'success'
            });
        },
        changesunday(value,currentaccount){
            // console.log("changesunday"+value);
            var currentmonday=[value,currentaccount];
            this.$store.commit('savesunday',currentmonday)
            this.$message({
                message: '已操作',
                type: 'success'
            });
        },

  }
  
};
</script>
<style lang="less" scoped>
* {
  overflow: hidden;
}
.box-card{
    height: 550px;
}
.search>el-button{
    width: 50px;
    height: 10px;
}
/deep/.el-calendar-table .el-calendar-day{
    height: 80px;
}
.select{
    margin-top: 10px;
    
}
/deep/.el-input{
    width: 50%;
}
/deep/.el-select-dropdown{
    min-width: 90px!important;
}
</style>